<template>
<div class="dialog">
    <el-dialog
      :title="title"
      :visible.sync="visible"
      :close-on-click-modal="false"
      width="75%"
      top="15vh"
      height="350"
      @opened="init"
      @closed="closeDialog"
      append-to-body
    >
    <div class="myMain" v-if="level == '1'">
       <el-radio-group v-model="brandRadio" size="small" @change="scrollOn">
        <el-radio-button
          :label="item.name"
          v-for="(item, index) in letter"
          :key="index"
        ></el-radio-button>
      </el-radio-group>
      <div class="content">
        <div class="page_content">
          <div class="brand" v-for="item in brandsList" :key="item.id">
            <span @click="onBrandClick(item)">{{ item.name }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="myMain" v-if="level == '2' || level == '3'">
      <el-breadcrumb separator=">" size="middle" style="margin: -15px 0px 10px 0px">
        <el-breadcrumb-item v-for="(item, index) in levelList" :key="index">
          <span @click="onBreadcrumbClick(item)"> {{ item.name }}</span>
        </el-breadcrumb-item>
      </el-breadcrumb>
      <div class="content page-pane3" v-if="level == '2'">
        <div class="series" v-for="it in seriesList" :key="it.type">
          <div class="type_name">· {{ it.type }}</div>
          <div class="page_content">
            <div class="brand2" v-for="item in it.children" :key="item.id">
              <div class="brand2_item" @click="onSeriesClick(item)">{{ item.name }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="content" v-if="level == '3'">
        <el-table
        ref="tblMain"
        style="margin-top: 10px"
        :data="dataSource"
        height="100%"
        @selection-change="onSelectChange"
        v-loading.body="loading"
        border
        stripe
      >
        <el-table-column
          type="selection"
          width="50"
          align="center"
        ></el-table-column>
        <el-table-column
          type="index"
          width="50"
          label="序号"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="vehicleModel"
          label="车型名称"
          align="center"
          width="120"
          sortable="custom"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="letterName"
          label="品牌名称"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="brandName"
          label="车系名称"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="year"
          label="年份"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="engine"
          label="发动机"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="displacement"
          label="排量"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="frontBrake"
          label="前制动器"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="rearBrake"
          label="后制动器"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="bodyForm"
          label="车身形式"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="driveMethod"
          label="驱动方式"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="parkingBrake"
          label="驻车制动"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
      </el-table>
      </div>
    </div>
     <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialog()">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import {
  getCarLetterList,
  getCarTreeBrandList,
  getCarList,
} from '@/api/carLine'

export default {
  name: 'JSelectVehicleModel',
  data () {
    return {
      modalWidth: 1450,
      columns: [
        { dataIndex: 'vehicleModel', title: '车型', align: "center" },
        { dataIndex: 'year', title: '年份', align: "center" },
        { dataIndex: 'engine', title: '发动机', align: "center" },
        { dataIndex: 'displacement', title: '排量', align: "center" },
        { dataIndex: 'frontBrake', title: '前制动器', align: "center" },
        { dataIndex: 'rearBrake', title: '后制动器', align: "center" },
        { dataIndex: 'bodyForm', title: '车身形式', align: "center" },
        { dataIndex: 'driveMethod', title: '驱动方式', align: "center" },
        { dataIndex: 'parkingBrake', title: '驻车制动', align: "center" },
      ],
      scrollTrigger: {},
      dataSource: [],
      selectionRows: [],
      selectMaterialRows: [],
      title:"车型选择",
      visible: true,
      level: "1",
      brandRadio: '全部',
      letter: [],
      brandsList: [],
      allBrands: [],
      curBrand: {},
      seriesList: [],
      levelList: [{ name: '全部品牌', id: "", level: "1" }],
      loading: false,
    }
  },
  created () {
    this.init()
  },
  methods: {
    searchReset () {
      let that = this;
      that.selectionRows = [];
    },
     /**
     * 关闭弹框
     */
    closeDialog() {
      this.searchReset();
      this.$emit('cancle')
    },
    handleSubmit () {
      let that = this;
      if (this.selectionRows.length > 0) {
        // this.getSelectMaterialRows();
        that.$emit('ok', that.selectionRows);
        that.searchReset();
        that.closeDialog();
      } else {
        this.$message.warning('请选择数据');
      }
    },
    //获取选择信息
    // getSelectMaterialRows () {
    //   let dataSource = this.dataSource;
    //   this.selectMaterialRows = [];
    //   for (let i = 0, len = dataSource.length; i < len; i++) {
    //     if (this.selectedRowKeys.includes(dataSource[i].id)) {
    //       this.selectMaterialRows.push(dataSource[i]);
    //     }
    //   }
    // },
    onSelectChange(val) {
      console.log(val);
      this.selectionRows = val
    },
    // onSelectChange (selectedRowKeys, selectionRows) {
    //   this.selectedRowKeys = selectedRowKeys;
    //   this.selectionRows = selectionRows;
    //   console.log(selectedRowKeys);
    //   debugger
    //   console.log(selectionRows);
    // },
    // select () {
    //   this.init();
    // },
    init () {
      this.selectionRows = [];
      this.selectMaterialIds = [];
      this.level = "1";
      this.brandRadio = "全部";
      this.letter = [];
      this.brandsList = [];
      this.allBrands = [];
      this.seriesList = [];
      this.dataSource = [];
      this.levelList = [{ name: '全部品牌', id: "", level: "1" }];
      for (var i = 0; i < 26; i++) {
        let op = {
          name: String.fromCharCode(65 + i),
          id: i
        }
        this.letter.push(op)
      }
      this.letter.unshift({
        name: '全部',
        id: ''
      })
      this.getBrandsList().then(() => {
        this.scrollOn()
      })
    },
     /**
     * 获取所有品牌
     */
    getBrandsList(){
      return new Promise(resolve=>{
        let data = {
          page: 1,
          size: 1000
        }
        getCarLetterList(data).then((res) => {
          const { code = undefined, data = {} } = res.data
          if (!code) {
            this.allBrands = data.content;
            resolve();
          } else {
            this.$message.error(data)
          }
        })
      })
    },
    /**
     * 按字母分类数据
     */
    scrollOn () {
      console.log(this.brandRadio)
      this.brandsList = []
      if (this.brandRadio != '全部') {
        this.allBrands.forEach((el) => {
          if (el.initial.charAt(0) == this.brandRadio) {
            this.brandsList.push(el)
          }
        })
      } else {
        this.brandsList = this.allBrands
      }
    },
    // 面包屑点击
    onBreadcrumbClick (item) {
      if (this.level != item.level) {
        this.level = item.level;
        this.levelList = this.levelList.slice(0, Number(this.level));
        if (this.level == "1") {
          this.brandRadio = '全部';
          this.brandsList = this.allBrands;
        }
      }
    },
    // 品牌点击
    onBrandClick (item) {
      this.curBrand = item;
      this.level = "2";
      this.levelList.push({ name: item.name, id: item.id, level: "2" });
      let params = {
        letterId: item.id
      }
      getCarTreeBrandList(params).then((res) => {
        const { code = undefined, data = {} } = res.data
        if (!code) {
          console.log(data);
         this.seriesList = data;
        } else {
          this.$message.error(data)
        }
      })
    },
    // 车系点击
    onSeriesClick (item) {
      this.level = "3";
      this.levelList.push({ name: item.name, id: item.id, level: "3" });
      let me = this
      let param = {
        brandId: item.id,
        page: 1,
        size: 9999
      }
      me.loading = true
      getCarList(param).then((res) => {
        const { code = undefined, data = {} } = res.data;
        me.loading = false
        if (!code) {
          me.dataSource = data.content
        } else {
          this.$message.error(data)
        }
      })
    },
    //选中
    onSelect (item) {
      this.$emit("ok", item);
      this.visible = false;
    }
  }
}

</script>

<style scoped lang="less">
.myMain {
  padding: 10px;
 // height: calc(100% - 20px);
  height: 350px;
  background: #fff;
  /* overflow: auto; */
}

.content {
  height: 100%;
  overflow: auto;
}

.page-pane3 {
  border: 1px #eee solid;
  /* padding: 10px; */
  border-radius: 3px;
  /*background-color: #eee;*/
}

.series {
  padding: 5px;
}

.type_name {
  color: #000;
  font-size: 14px;
  font-weight: 600;
}

.page_content {
  display: flex;
  flex-wrap: wrap;
  padding: 5px;

  .brand {
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    align-items: center;
    width: 10%;
    padding: 10px;

    span {
      cursor: pointer;
    }

    span:focus {
      color: #fff;
      background-color: #409eff;
      border-color: #409eff;
      box-shadow: -1px 0 0 0 #409eff;
    }

    span:hover {
      color: #409eff;
      background-color: #fff;
      border-color: #409eff;
    }

    .brand_del {
      margin-left: 10px;
    }
  }

  .brand2 {
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    align-items: center;
    width: 15%;
    margin: 10px;


    cursor: pointer;

    .brand2_item {
      padding: 5px;
      width: 100%;
      border: 1px rgb(255, 195, 52) solid;
    }

    .brand2_item:focus {
      color: #fff;
      background-color: #409eff;
      border-color: #409eff;
      box-shadow: -1px 0 0 0 #409eff;
    }

    .brand2_item:hover {
      color: #409eff;
      background-color: #fff;
      border-color: #409eff;
    }

    .brand_del {
      margin-left: 10px;
    }
  }
}
</style>
